import 'package:cook_dinner/config/include.dart';
import 'package:flutter/material.dart';

class UserControl extends StatefulWidget {
  const UserControl({Key? key}) : super(key: key);

  @override
  State<UserControl> createState() => _UserControlState();
}

class _UserControlState extends State<UserControl> {
  int _current = 0;
  final List<Map<String, String>> buts = [
    {'name': '食谱', 'nus': '46'},
    {'name': '做饭教程', 'nus': '21'},
    {'name': '收藏', 'nus': '166'}
  ];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 26.rpx, right: 36.rpx, bottom: 18.rpx),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: List.generate(
              buts.length,
              (index) {
                return _naviBtn(
                  t1: buts[index]['name'],
                  t2: buts[index]['nus'],
                  type: _current == index,
                  onTap: () {
                    setState(() {
                      _current = index;
                    });
                  },
                );
              },
            ),
          ),
          Image.asset(
            'assets/images/psearch.png',
            width: 20.rpx,
            height: 20.rpx,
          ),
        ],
      ),
    );
  }

  Widget _naviBtn({t1, t2, type = true, onTap}) {
    return InkWell(
      onTap: onTap,
      child: Container(
        height: 39.26.rpx,
        padding: EdgeInsets.only(right: 10.7.rpx),
        constraints: BoxConstraints(minWidth: 94.rpx),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20.rpx),
          color: type ? const Color(0xffFA8303) : Colors.transparent,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 14.rpx),
              child: Text(
                t1 ?? '',
                style: TextStyle(
                  color: type ? Colors.white : const Color(0xff333333),
                  fontSize: 14.rpx,
                ),
              ),
            ),
            Container(
              width: type ? 27.5.rpx : 39.26.rpx,
              height: 27.5.rpx,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: type
                    ? Colors.white
                    : const Color(0xffFA8303).withOpacity(0.33),
                borderRadius: BorderRadius.circular(15.rpx),
              ),
              child: Text(
                t2 ?? '',
                style: TextStyle(
                  color: type
                      ? const Color(0xffFA8303).withOpacity(0.63)
                      : Colors.white,
                  fontSize: 14.rpx,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
